<template>
  <div class="sender-receiver-query">
    <!-- Sender 输入框 -->
    <el-input
      v-model="sender"
      placeholder="请输入Sender"
      style="width: 300px; margin-right: 20px;"
    ></el-input>
    <el-button type="primary" @click="fetchSenderData">查询Sender</el-button>

    <!-- Receiver 输入框 -->
    <el-input
      v-model="receiver"
      placeholder="请输入Receiver"
      style="width: 300px; margin-left: 20px;"
    ></el-input>
    <el-button type="primary" @click="fetchReceiverData">查询Receiver</el-button>

    <!-- ECharts 容器：Sender 折线图 -->
    <div id="senderChart" style="width: 1200px; height: 400px; margin-top: 20px;"></div>

    <!-- ECharts 容器：Receiver 折线图 -->
    <div id="receiverChart" style="width: 1200px; height: 400px; margin-top: 20px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';

// 定义响应式数据
const sender = ref('');
const receiver = ref('');
const senderChartInstance = ref(null); // 存储 Sender ECharts 实例
const receiverChartInstance = ref(null); // 存储 Receiver ECharts 实例
const senderChartData = ref([]); // 存储 Sender 图表数据
const receiverChartData = ref([]); // 存储 Receiver 图表数据

const fetchSenderData = async () => {
  if (!sender.value) {
    ElMessage.error('请先输入 Sender');
    return;
  }

  try {
    const response = await axios.get('http://localhost:9900/data/sender', {
      params: {
        sender: sender.value,
      },
    });

    if (response.data.code === 200 && response.data.data.length > 0) {
      senderChartData.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg || '查询 Sender 无数据');
      senderChartData.value = []; // 清空图表数据
    }
    await nextTick(); // 确保数据更新后再绘制图表
    renderSenderChart(); // 更新图表
  } catch (error) {
    ElMessage.error('查询 Sender 请求失败，请检查接口或网络连接');
    senderChartData.value = []; // 清空图表数据
    renderSenderChart(); // 更新图表
  }
};

const fetchReceiverData = async () => {
  if (!receiver.value) {
    ElMessage.error('请先输入 Receiver');
    return;
  }

  try {
    const response = await axios.get('http://localhost:9900/data/receiver', {
      params: {
        receiver: receiver.value,
      },
    });

    if (response.data.code === 200 && response.data.data.length > 0) {
      receiverChartData.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg || '查询 Receiver 无数据');
      receiverChartData.value = []; // 清空图表数据
    }
    await nextTick();
    renderReceiverChart();
  } catch (error) {
    ElMessage.error('查询 Receiver 请求失败，请检查接口或网络连接');
    receiverChartData.value = [];
    renderReceiverChart();
  }
};


// 渲染 Sender 折线图
const renderSenderChart = () => {
  if (!senderChartInstance.value) {
    senderChartInstance.value = echarts.init(document.getElementById('senderChart'));
  }

  const ids = senderChartData.value.map(item => item.id); // x轴数据
  const costs = senderChartData.value.map(item => parseFloat(item.cost)); // y轴数据

  const option = {
    title: {
      text: `以太坊交易Sender ${sender.value} 的Cost变化`
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ids,
      name: 'ID'
    },
    yAxis: {
      type: 'value',
      name: 'Cost'
    },
    series: [
      {
        data: costs,
        type: 'line',
        smooth: false,
        name: 'Cost'
      }
    ]
  };

  senderChartInstance.value.setOption(option);
};

// 渲染 Receiver 折线图
const renderReceiverChart = () => {
  if (!receiverChartInstance.value) {
    receiverChartInstance.value = echarts.init(document.getElementById('receiverChart'));
  }

  const ids = receiverChartData.value.map(item => item.id); // x轴数据
  const costs = receiverChartData.value.map(item => parseFloat(item.cost)); // y轴数据

  const option = {
    title: {
      text: `以太坊交易Receiver ${receiver.value} 的交易金额变化`
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ids,
      name: 'ID'
    },
    yAxis: {
      type: 'value',
      name: 'Cost'
    },
    series: [
      {
        data: costs,
        type: 'line',
        smooth: true, 
        name: 'Cost'
      }
    ]
  };

  receiverChartInstance.value.setOption(option);
};

onMounted(() => {
  // 初始化图表实例
  senderChartInstance.value = echarts.init(document.getElementById('senderChart'));
  receiverChartInstance.value = echarts.init(document.getElementById('receiverChart'));
});
</script>
